<template>
	<view class="container">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left"></view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">
					新品发售
				</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<!-- <view class="icon-right"></view> -->
			</view>
		</u-navbar>
		
		<!-- <view class="searchBox">
			<view class="content">
				<u-icon name="search" class="searchIcon" color="#999" size="40upx"></u-icon>
				<input type="text" @input="nameChange" v-model="listQuery.name" placeholder="请输入商品" />
			</view>
		</view> -->
		
		<view class="bannerBox">
			<u-swiper :list="banerList" keyName="imgs" height="320upx" radius="16upx"
					@change="e => current = e.current" @tap="bannerClick">
			</u-swiper>
			<view class="indicatorS">
				<view class="indicator__dot" v-for="(item, index) in banerList"
					:key="index" :class="[index === current && 'indicator__dot--active']"></view>
			</view>
		</view>
		
		<view class="tabBox">
			<view>
				<u-tabs activeStyle="color:#2C1769;font-size: 30upx;font-weight: 800;transform:scale(1.08)" :current="swiperCurrent"
				 inactiveStyle="color: #666;transition: all 0.5s;font-size: 30upx;transform:scale(1)"
				lineColor="#FE5400" lineWidth="32upx" itemStyle="height:72upx" :list="tabBoxList" @change="tabsChange"></u-tabs>
			</view>
		</view>
		
		<view class="goods_list">
			<swiper class="swiper" :interval="2000" :duration="500" :autoplay="false" @change="swiperChange"
				 :current="swiperCurrent" >
				<swiper-item class="swiper-item" v-for="(val,i) in tabBoxList" :key="i">
					<scroll-view class="listview" style="flex: 1;width: 100%;height: 100%;padding-bottom:40upx;" :upper-threshold="1"
					 enableBackToTop="true" :scroll-y="isScrollY" @scrolltolower="scrolltolower()" @scrolltoupper="isScrollY = false">
						<goods_list_item :list="val.list" @changeStatus="changeStatus" :isEnd="false" :isMore="isMore" v-if="swiperCurrent == 0" />
						
						<goods_notice :list="val.list" :isEnd="isEnd" v-if="swiperCurrent == 1" />
						
						<view v-show="val.list.length == 0" class="noListBox">
							<view class="noData">
								<image class="noDataImg" src="../../static/noData.png" mode=""></image>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="popupBox" v-if="!hasLogin && isPopupShow">
			<view v-if="!hasLogin">
				<text>请先前往登录吧！</text>
				<view class="btns">
					<navigator class="navigator" url="/pages/login/login">去登录</navigator>
					<u-icon @tap="isPopupShow = false" name="close" color="#191919" size="16"></u-icon>
				</view>
			</view>
			<view v-if="hasLogin && uerInfo.isRealName != 1">
				<text>实名认证后才可以购买哦！</text>
				<view class="btns">
					<navigator class="navigator" url="/pages/login/login">去认证</navigator>
					<u-icon @tap="isPopupShow = false" name="close" color="#191919" size="16"></u-icon>
				</view>
			</view>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
		
	</view>
</template>

<script>
	import goods_list_item from "./components/goods_list.vue"
	import goods_notice from "./components/goods_notice.vue"
	
	import {PATH_IMG, BASE_API} from '@/common/config.js';
	import {mapState ,mapMutations} from 'vuex'; 
	import {
		getGoods_notice,
		getCastingCollList,
		getBannerList,
	} from '@/api/home.js'
	export default {
		components:{goods_list_item,goods_notice},
		data() {
			return {
				isScrollY:false,
				// userMsgNUm:0,
				tabBoxList:[
					{id:1,name:"最新发售",list:[]},
					{id:2,name:"发售预告",list:[]},
				],
				isPopupShow:true,
				tabBoxIndex:0,
				isEnd: false,
				isMore: false,
				stock: '',
				current:0,
				listQuery: {
					page: 1,
					pageSize: 10,
					pages:1,
					status:"",
					typeId:"",
					name:""
				},
				banerList:[],
				swiperCurrent:0,
				timerFn:null
			}
		},
		onReachBottom(){
			this.isScrollY = true;
		},
		onLoad() {
			this.getBanner();
			this.getSeriesList(false,1);
		},
		onShow() {
			if(!this.hasLogin){
				uni.reLaunch({
					url:"/pages/login/login"
				});
			}
		},
		computed:{
			...mapState(["hasLogin","uerInfo","h5Data"])
		},
		methods: {
			changeStatus(i){
				this.tabBoxList[this.swiperCurrent].list[i].status = 1;
			},
			bannerClick(i){
				let obj = this.banerList[i];
				if(obj.linkUrl){
					uni.navigateTo({
						url:obj.linkUrl
					});
				}
			},
			// tabs通知swiper切换
			tabsChange(e) {
				this.isEnd = false;
				this.swiperCurrent = e.index;
				this.listQuery.typeId = this.tabBoxList[e.index].id;
				this.listQuery.page = 1;
				this.listQuery.pages = 1;
				
				if(this.swiperCurrent == 0){
					this.getSeriesList();
				}else if(this.swiperCurrent == 1){
					this.getNoticeList();
				}
			},
			swiperChange(e){
				this.isEnd = false;
				let current = e.detail.current;
				if(this.swiperCurrent != current){
					this.listQuery.page = 1;
					this.listQuery.pages = 1;
					this.swiperCurrent = current;
					this.listQuery.typeId = this.tabBoxList[current].id;
					if(this.swiperCurrent == 0){
						this.getSeriesList();
					}else if(this.swiperCurrent == 1){
						this.getNoticeList();
					}
				}
			},
			getBanner(){
				getBannerList({position:1}).then(res => {
					if (res.data.success) {
						this.banerList = res.data.obj.map((im)=>{
							im.imgs = this.pathImg + im.imgs;
							return im;
						});
					}
				}).catch(err=>{
					
				});
			},
			nameChange(val){
				let str = val.detail.value;
				clearTimeout(this.timerFn);
				this.isMore = false;
				this.timerFn = setTimeout(()=>{
					this.getSeriesList();
				},1500);
			},
			getSeriesList(flag,i) {// 获取藏品发布列表数据
				if(i != 1){this.$refs.min_loading.open('加载中，请稍后！');}
				getCastingCollList(this.listQuery).then(res => {
					if (res.data.success) {
						this.listQuery.pages = res.data.obj.pages;
						
						let newList = res.data.obj.list.filter((item, index) => {
							if(item.metafile){
								item.metafile = JSON.parse(item.metafile);
								item["titleNM"] = item.metafile.name;
							}else{
								item["titleNM"] = "";
							}
							if(item.issuerHead){
								item.issuerHead = ((item.issuerHead).split(',')).map(item => {
									item = this.pathImg + item;
									return item;
								});
							}else{
								item.issuerHead = [];
							}
							if(item.fileUrl){
								item.fileUrl = (this.pathImg + item.fileUrl);
							}
							if(item.issuerName){
								let names = ((item.issuerName).split(',')).map(item => {
									item = item;
									return item;
								});
								item.issuerName = names[0];
							}else{
								item.issuerName = [];
							}
							if(item.startTime){
								item.startTime = this.moment(item.startTime).diff(new Date().getTime())
							}
							return index < 6;
						});
						if(res.data.obj.list.length > 6){
							this.isMore = true;
						}else{
							this.isEnd = true
						}
						if (this.listQuery.page == 1) {
							this.tabBoxList[this.swiperCurrent].list = [...newList];
						} else {
							this.tabBoxList[this.swiperCurrent].list = [...this.tabBoxList[this.swiperCurrent].list,...newList];
						}
					}
					uni.stopPullDownRefresh();
				}).catch(err=>{
					uni.stopPullDownRefresh();
				}).finally(() => {
					uni.stopPullDownRefresh();
					this.$refs.min_loading.close();
				});
			},
			getNoticeList(flag,i) {//获取预告列表
				if(i != 1){this.$refs.min_loading.open('加载中，请稍后！');}
				getGoods_notice(this.listQuery).then(res => {
					if (res.data.success) {
						let obj = res.data.obj,goodsList = [];
						for (let key in obj) {
							goodsList.push({
								date:key,
								list:obj[key]
							})
						}
						if (goodsList.length == 0) {
							this.isEnd = true;
							return;
						}
						let newList = goodsList.filter((item, index) => {
							item.list = item.list.filter((im)=>{
								if(im.metafile){
									im.metafile = JSON.parse(im.metafile);
								}
								if(im.status == 1){
									im["statusT"] = "距离活动结束";
								}else if(im.status == 2){
									im["statusT"] = "距离活动开始";
								}else{
									im["statusT"] = "距离已结束";
								}
								if(im.issuerHead){
									im.issuerHead = ((im.issuerHead).split(',')).map(m => {
										m = this.pathImg + m;
										return m;
									});
								}else{
									im.issuerHead = [];
								}
								
								if(im.issuerName){
									im.issuerName = (im.issuerName).split(',');
								}else{
									im.issuerName = [];
								}
								if(im.label){
									if(im.label.indexOf(",") != -1){
										obj["labelList"] = im.label.split(',');
									}else{
										let labelList = im.label.split('#');
										labelList = labelList.map(im=>{
											im = ("#" + im);
											return im;
										});
										im["labelList"] = labelList.filter((im,i)=>{
											return i>0;
										});
									}
								}else{
									im["labelList"] = [];
								}
								return im;
							});
							return item
						});
						this.tabBoxList[this.swiperCurrent].list = [...newList];
					}
					uni.stopPullDownRefresh();
				}).catch(err=>{
					uni.stopPullDownRefresh();
				}).finally(() => {
					uni.stopPullDownRefresh();
					this.$refs.min_loading.close();
				});
			},
			scrolltolower(){
				if(this.listQuery.pages > this.listQuery.page){
					this.listQuery.page++;
					if(this.swiperCurrent == 0){
						// this.getSeriesList();
					}else if(this.swiperCurrent == 1){
						this.getNoticeList();
					}
				}else{
					this.isEnd = true;
				}
			},
		},
		onPullDownRefresh() {//下拉刷新
			this.isEnd = false;
			this.listQuery.page = 1;
			if(this.swiperCurrent == 0){
				this.getSeriesList();
			}else if(this.swiperCurrent == 1){
				this.getNoticeList();
			}
		}
	}
</script>
<style scoped lang="less">
	page{width: 100%;height: 100%;background-color: #F9F8F8;}
	.container {
		width: 100%;
		height: 100%;
		background-color: #F9F8F8;
		.searchBox{
			padding: 0 30upx;
			padding-bottom: 30upx;
			.content{
				display: flex;
				align-items: center;
				height: 60upx;
				width: 100%;
				background-color: #fff;
				border-radius: 40upx;
				padding: 0 20upx;
				.searchIcon{margin-top: 6upx;}
				input{
					font-size: 26upx;
					margin-left: 10upx;
					flex: 1%;
				}
			}
			
		}
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				text-align: center;
				color: #fff;
			}
		}
		.popupBox{
			width: 100%;
			height: 84upx;
			position: fixed;
			bottom: 118upx;
			left: 0;
			padding: 0 40upx;
			z-index: 99;
			>view{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #FCCC35;
				border-radius: 10upx;
				font-size: 24upx;
				padding:0 30upx;
				color: #151515;
				.btns{
					display: flex;
					align-items: center;
					font-size: 0;
					.navigator{
						width: 130upx;
						height: 55upx;
						background: #191919;
						border-radius: 28upx;
						font-size: 24upx;
						font-weight: 400;
						color: #FCCC35;
						line-height: 55upx;
						text-align: center;
						margin-right: 10upx;
					}
				}
			}
		}
		
		.tabBox{
			width: 100%;
			padding: 0 8upx;
			margin-bottom: 40upx;
		}
		.bannerBox{
			padding: 0 30upx;
			padding-top: 160upx;
			position: relative;
			margin-bottom:50upx;
			.indicatorS{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 10upx;
				position: absolute;
				bottom:-30upx;
				left: 0;
				.indicator__dot {
					 height: 100%;
					 width: 10upx;
					 border-radius: 50%;
					 background-color: #A4ACB6;
					 margin: 0 10upx;
					 transition: background-color 0.3s;
				}
				.indicator__dot--active {
					 background-color: #2C1769;
				 }
			}
		}
			
		.goods_list {
			width: 100%;
			background-color: #F9F8F8;
			height: calc(100% - 150upx);
			.swiper{
				width: 100%;
				height: 100%;
				.swiper-item{
					width: 100%;
					height: 100%;
					padding-bottom: 40upx;
					position: relative;
					.listCentent{
						padding-bottom: 200upx;
						height:100%;
					}
				}
			}
			
		}

		.noListBox {
			text-align: center;
			.noData {
				width: 220upx;
				height: 180upx;
				margin: 0 auto;
				margin-top: 100upx;
				.noDataImg {
					width: 220upx;
					height: 180upx;
				}
			}
		}
	}
</style>
